<template>
    <iscroll-view ref="scrollView" class="scroll-view" @pullUp="pullUp" @pullDown="pullDown" :options="{mouseWheel: true}">
      <div class="pull-down">
        <p v-show="showFreshTip" class="text">{{freshTipText}}</p>
        <loading class="loading" v-show="isPullingDown"></loading>
      </div>
      <div class="content">
        <h1 v-for="(item, index) in data" :key="index">{{item}}{{index}}</h1>
      </div>
      <div class="pull-up">
        <p v-show="showMoreTip" class="text">{{moreTipText}}</p>
        <loading class="loading" v-show="isPullingUp"></loading>
      </div>
    </iscroll-view>
</template>

<script>
  import loading from '../loading/loading'
  export default {
    name: "VueIscrollView",
    components: {loading},
    data () {
      return {
        showFreshTip: false,
        isPullingDown: false,
        freshTipText: '刷新成功',
        moreTipText: '加载更多',
        showMoreTip: true,
        isPullingUp: false,
        data: [
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view',
          'vue-iscroll-view'
        ]
      }
    },
    mounted () {
      this.$refs.scrollView.refresh()
    },
    methods: {
      pullUp () {
        console.log('pull up')
        this.showMoreTip = false
        this.isPullingUp = true
        setTimeout(() => {
          this.data.push('new item')
          this.isPullingUp = false
          this.showMoreTip = true
        }, 3000)
      },
      pullDown () {
        console.log('pull down')
        this.isPullingDown = true
        setTimeout(() => {
          this.isPullingDown = false
          this.showFreshTip = true
          setTimeout(() => {
            this.showFreshTip = false
          }, 3000)
        }, 3000)
      }
    }
  };
</script>

<style scoped lang="scss">
 .scroll-view{
   touch-action: none;
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   padding: 1rem;
   overflow: hidden;
   .pull-down{
     position: absolute;
     left: 0;
     right: 0;
     .text{
       text-align: center;
       color: #ffffff;
       background-color: rgba(0,0,0, 0.4);
       padding: 8px 0;
     }
     .loading{
       display: flex;
       justify-content: center;
       padding: 8px 0;
     }
   }
   .pull-up{
     .text{
       text-align: center;
       color: #666666;
       padding: 8px 0;
     }
     .loading{
       display: flex;
       justify-content: center;
       padding: 8px 0;
     }
   }
 }
</style>
